<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-02-01 11:20:29
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-03 16:20:35
 * @FilePath: \recruitApp\recruitApp\src\pages\user\Me\Intent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <van-nav-bar
    title="求职意向"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        label="求职类型"
        placeholder="点击选择职位"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="resultTwo"
        is-link
        readonly
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirmTwo"
          @cancel="showArea = false"
        />
      </van-popup>
      <div class="a">薪资要求</div>
      <div class="money">
        <van-field v-model="value" placeholder="请输入" name="money" />
        <span>-</span>
        <van-field v-model="valueOne" placeholder="请输入" name="moneyOne" />
        <span>k</span>
      </div>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<!-- 逻辑层 -->
<script setup>
// 导入useRouter方法
import { useRouter } from "vue-router";
import { ref } from "vue";
import { areaList } from "@vant/area-data";
import { get, post, put, del, patch } from "~/axios/http";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "会计", value: "Hangzhou" },
  { text: "老师", value: "Ningbo" },
  { text: "IT", value: "Wenzhou" },
  { text: "税务", value: "Shaoxing" },
  { text: "管理", value: "Huzhou" },
];
const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};

const resultTwo = ref("");
const showArea = ref(false);
const onConfirmTwo = ({ selectedOptions }) => {
  showArea.value = false;
  resultTwo.value = selectedOptions.map((item) => item.text).join("/");
};
const value = ref("");
const valueOne = ref("");
async function onSubmit(values) {
  console.log("submit", values);
  let id = ref(localStorage.getItem("key"));
  let arr1 = ref(`${values.money}-${values.moneyOne}k`);
  let arr = ref({ name: values.picker, money: arr1.value, place: values.area });
  console.log(arr.value);
  let res1 = await get(`/api/infomation/${id.value}`);
  res1.data.num4.push(arr.value);
  let res2 = await patch(`/api/infomation/${id.value}`, {
    num4: res1.data.num4,
  });
  router.push("/resume");
}
</script>
<!-- 样式层 -->
<style  scoped>
.money {
  display: flex;
  align-items: center;
}
.a {
  margin-left: 4vw;
  margin-top: 8vw;
}
</style>